<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3940324_5l3w665yzry.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3940940_5yi81mv6acq.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3940322_3g0lp8tmy78.css">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #app{
    padding: 0.6rem;
    }
.top{
    display: flex;
    justify-content: space-between;
    height: 1rem;
    position: relative;
}
.top p{
    font-size: 0.5rem;
}
.top p:nth-child(1){
    font-weight: 600;
}
.subscript{
    width: 0.6rem;
    height: 0.1rem;
    background-color: black;
    position: absolute;
    bottom: 0.2rem;
    left: 0.2rem;
    border-radius: 0.1rem;
}
.local{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.4rem;
}
.localTop{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.4rem;
    color: #555555;
    margin-top: 0.2rem;
}
.localTop div:nth-child(1){
    font-size: 0.6rem;
    font-weight: 600;
    color: black;
}
.localBottom{
    font-size: 0.4rem;
    margin: 0.4rem 0 0.4rem 0;
    display: flex;
    justify-content: space-between;
    overflow: scroll;
}
.localBottom p:nth-child(3){
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: rgb(117, 117, 117);
}
.filmimg{
    position: relative;
}
.eye{
    position: absolute;
    bottom: 0.15rem;
    right: 0.5rem;
    color: #fff;
    font-size: 0.05rem;
}
.film{
    margin-right: 0.45rem;
}

.readers{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.4rem;
}
.flex{
    display: flex;
}
.content{
    font-size: 0.4rem;
    margin-bottom: 0.5rem;
}
.nametop{
    justify-content: space-between;
}
.contentnotes{
    overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0.4rem 0 0.4rem 0;
}
.cor{
  color: rgb(117, 117, 117);

}
.marrig{
    margin-left: 0.2rem;
}
.fixed{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2rem;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.348);
    background-color: #fff;
}
.bottom{
    font-size: 0.4rem;
    display: flex;
    justify-content: space-between;
}
.bottom i{
    font-size: 1rem;
}
.bottomindividual{
    margin-left: 0.2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}
.detailPage{
        font-size: 0.5rem;
    }
    .top1{
        display: flex;
        justify-content: space-between;
    }
    .textddaa i{
        font-size: 0.8rem;
        margin-right: 0.3rem;
    }
    .imgele{
        text-align: center;
        position: relative;
        margin-top: 0.6rem;
    }
    .imgele img{
        width: 3.5rem;
        border-radius: 0.2rem;
    }
    .effect{
        filter: drop-shadow(0rem 0.5rem 0.5rem #000);
    }   
    .localel{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.5rem;
    }
    .localel h5{
    margin: 0.3rem 0 0.3rem 0;
    }
    .localel p{
        font-size: 0.3rem;
        color: #8b8b8b;
    }
    .localel div:nth-last-child(1){
        width: 2.5rem;
        font-size: 0.5rem;
        background-color: rgb(167, 213, 213);
        border-radius: 0.1rem;
        margin-bottom: 0.4rem;
        color: rgb(0, 42, 255);
    }
    .localel div:nth-last-child(2){
        width: 1.8rem;
        font-size: 0.5rem;
        background-color: rgb(167, 213, 213);
        border-radius: 0.1rem;
        margin: 0.3rem 0 0.3rem 0;
        color: rgb(0, 42, 255);

    }
    .local2{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between ;
    font-size: 0.6rem;
    font-weight: 600;
    }
    .Discolor{
    font-size: 0.3rem;
    color: #8b8b8b;
    font-weight: 0;
    }
    .local3{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.4rem;
    }
    .labelpp{
        display: flex;
        margin: 0.6rem 0 0.6rem 0;
    }
    .labelpp p{
        background-color: #8b8b8b;
        display: block;
        border-radius: 0.5rem;
        font-size: 0.42rem;
        color: #e4e4e4;
        margin-right: 0.5rem;
        padding: 0rem 0.3rem 0rem 0.3rem;
    }
    .detailedText{
        overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.5rem;
  margin-bottom: 0.5rem;
    }
    .local4{
    padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.5rem;
    padding: 0.4rem 0;
    }
    .local4 p:nth-last-child(1){
    font-size: 0.4rem;
    color: #8b8b8b;
    margin-right: 0.5rem;
    }
    .local5{
        padding: 0.1rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.132);
    border-radius: 0.2rem;
    margin-top: 0.5rem;
    }
    .local5 p{
        margin-top: 1rem;
        font-size: 0.5rem;
        font-weight: 600;
    }
    .local5_1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.5rem;
        margin-bottom: 2rem;
    }
    .local5_1 i{
        font-size: 0.7rem;
    }
    .local5_1 div{
        width: 10rem;
        height: 1.2rem;
        text-align: center;
        border-radius: 1rem;
        background-color: #292ab6;
        line-height: 1.2rem;
        font-size: 0.5rem;
        color: #fff;
    }
    .c1 {
        width: 12rem;
        height: 2rem;
       background-color: aliceblue;
        display: flex;
        position: fixed;
        top: 0rem;

    }

    .hide {
        display: none;
    }

    .tou {
        position: relative;
        left: 2.8rem;
        font-weight: 300;
        font-size: 1.1rem;
    }

    .dixian {
        width: 133%;
        background-color: black;
        height: 0.01rem;
        position: relative;
        left: -4rem;
        top: 2rem;
    }
    .dibu{
        width: 12rem;
        height: 3rem;
        display: flex;
        justify-content: space-around;
        background-color: aliceblue;
        position: fixed;
        bottom:  0rem;
    }
</style>

<body>
    <div id="app">
        <router-view></router-view>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/router.js"></script>
<template id="homePage"> 
    <div>
        <div class="top">
            <p v-for="item in top">{{item}}</p>
            <div class="subscript"></div>
        </div>
        <div class="local">
            <div class="localTop">
                <div>{{local.boxleft}}</div>
                <div>{{local.boxrigth}}</div>
            </div>
            <div class="localBottom">
                <div v-for="item in local.imgele" class="film">
                    <div class="filmimg" @click="fn">
                        <img style="width: 2.3rem;border-radius: 0.2rem;" :src="item.src" alt="">
                    <div class="eye"><i class="iconfont icon-yanjing"></i>{{item.viewingTimes}}</div>
                    </div>
                    <p>{{item.filmTitle}}</p>
                    <p>{{item.notes}}</p>
                </div>
            </div>
        </div>
        <div class="readers">
            <div class="localTop">
                <div>{{local.boxleft2}}</div>
                <div>{{local.boxrigth}}</div>
            </div>
            <div v-for="iten in local.contentImg" class="content flex">
                <div><img style="width: 2rem;border-radius: 0.2rem;" :src="iten.src" alt=""></div>
                <div class="marrig">
                    <div class="flex nametop">
                        <div>{{iten.filmTitle}}</div>
                        <div><i class="iconfont icon-yanjing"></i>{{iten.viewingTimes}}</div>
                    </div>
                    <div class="contentnotes">{{iten.notes}}</div> 
                    <div class="cor">{{iten.notestxt}}</div> 
                </div>
        </div>
    
    
    
    <div class="fixed bottom">
    <div class="bottomindividual flex" v-for="k,i in bottomtxt">
        <i :class="i"></i>
        <p>{{k}}</p>
    </div>
    </div>
    
    
    </div> 
    </div>
   
</template>


<template id="detailPage">
    <div>
        <div class="top1">
            <div @click="fn2"><i style="font-size: 0.8rem;" class="iconfont icon-jiantou-copy-copy-copy"></i></div>
            <div class="textddaa">
                <i class="iconfont icon-xiazai"></i>
                <i class="iconfont icon-liwu"></i>
                <i class="iconfont icon-fenxiangxiao"></i>
                <i class="iconfont icon-24gl-shieldWarning"></i>
            </div>
        </div>
        <div class="imgele">
            <img class="effect" :src="list.src" alt="">
            <img class="effect" style="position: absolute;right: 0;width: 2.3rem;top: 50%;transform: translateY(-50%);" :src="list.src" alt="">
        </div>

        <div class="localel">
            <h5>{{list.filmTitle}}</h5>
            <p>{{list.text}}></p>
            <div><i class="iconfont icon-fankaishu"></i>{{list.ageLimit}}</div>
            <div><i class="iconfont icon-paihang"></i>NO.{{list.Ranking}}></div>
        </div>

        <div class="local2">
            <div v-for="item,index,ss in list.viewing">
                <p>{{item}}</p>
                <p class="Discolor">{{index}}</p>
            </div>
        </div>


        <div class="local3">
            <div class="labelpp">
                <div v-for="item in list.label">
                    <p>{{item}}</p>
                </div>
            </div>
            
            <div class="detailedText">
                <p>{{list.detailedText}}</p>
            </div>
        </div>


        <div class="local4">
            <p>{{list.more}}</p>
            <p>{{list.complete}}</p>
        </div>

        <div class="local5">
            <p>{{list.will}}</p>
            <div class="local5_1">
                <i class="iconfont icon-aixin--xian"></i>
                <div @click="fn" class="determine">{{list.start}}</div>
            </div>
        </div>

    </div>
</template>

<template id="ccc">
    <div>
        <div class="c1">
            <div @click="fn" class="iconfont  icon-xiangzuo1 "
                style=" position: relative;left: 0.2rem;top: 0.4rem; font-size: 0.9rem;"></div>
            <div class="tou">{{tou}}</div>
            <div class="iconfont  icon-xiazai "
                style=" position: relative;left: 3.9rem;top: 0.4rem; font-size: 0.9rem;"></div>
            <div class="iconfont icon-gengduo "
                style=" position: relative;left: 4.6rem;top: 0.4rem; font-size: 0.9rem; "></div>

        </div>
        <div class="dixian" style=" position: fixed;   bottom:0rem;" ></div>

        <div style=" margin:3rem 0rem 0rem  1rem ; font-weight: 700; ">{{tou}}</div>

        <div style=" font-size: 0.5rem;  padding:0.5rem  ; ">{{nei}}</div>

<div class="dibu" >
        <div   class=" iconfont  icon-liebiao "  style="font-size:0.9rem;  margin-top: 0.5rem; "  ></div>
        <div      class=" iconfont icon-shezhi  "  style="font-size:1.5rem; margin-top: 0.3rem; "  ></div>
        <div      class=" iconfont icon-shu_ "  style="font-size:1.2rem; margin-top: 0.51rem; "  ></div>
        <div   class="   iconfont       icon-moonyueliang  "    style="font-size:1.2rem; margin-top: 0.5rem; "  ></div>
        <div   class="  iconfont  icon-qipao"  style="font-size:1rem; margin-top: 0.6rem; "  ></div>
</div>


    </div>


</template>
<script>
    var bodyele = document.body
    var width = window.innerWidth
    document.documentElement.style.fontSize = width / 12 + "px"
    window.onresize = function () {
        var width = window.innerWidth
        document.documentElement.style.fontSize = width / 12 + "px"
    }


    var homePage={
        template:"#homePage",
        data() {
            return {
            top:['HOT','RANK','NEW','COMIC','FREE',],
            local:{
                boxleft:'Local 24h Hot Reading',
                boxleft2:'Readers·Choice',
                boxrigth:'View all>',
                imgele:[
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    viewingTimes:'386.6K',
                },
            ],
            contentImg:[
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    notestxt:'His Redemption',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    notestxt:'His Redemption',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    notestxt:'His Redemption',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    notestxt:'His Redemption',
                    viewingTimes:'386.6K',
                },
                    {
                    src: './img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    notes:'一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场！社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保？以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义？',
                    notestxt:'His Redemption',
                    viewingTimes:'386.6K',
                },
            ],

            },
            bottomtxt:{
                'iconfont icon-noun__cc':'Libran',
                'iconfont icon-daohang':'Dacover',
                'iconfont icon-jurassic_fangdaj':'Search',
                'iconfont icon-liwu':'GiftBag',
                'iconfont icon-xiaoxi':'Me',
            }
            }
        },
        methods: {
            fn(){
                console.log(123);
                window.location.href="#/deta"
            }
        },
    }
    
    var detailPage={
    template:"#detailPage",
    data() {
        return {
            list:
                {
                    src:'./img/dushelvshi4.webp',
                    filmTitle:'毒舌律师',
                    text:'pendingCase',
                    ageLimit:'16+',
                    Ranking:'13',
                    viewing:{
                        'FOLLOWERS':'72.8K',
                        'READS':'572.1K',
                        'VOTES >':'4274',
                    },
                    label:['His Redemption','Pack','Happy Ending'],
                    detailedText:"一宗国际名模涉嫌虐待女儿的冤案，竟成了法律界、权贵与名媛之间的角力场。社会金字塔顶层的钟氏家族，如何用尽权力与资源去自保；以林凉水（黄子华 饰）为代表的律师们又如何在重重困难下伸张正义",
                    more:'LIST 124 Episodes >',
                    complete:'COMPLETED',
                    will:'YOU WILL ALSO LIKE',
                    start:'START READING'
                }
            
        }
    },
    methods: {
            fn(){
                window.location.href="#/ccc"
            },
            fn2(){
                window.location.href="#/"
            }
        },
}

var ccc = {
        template: "#ccc",
        data() {
            return {

                tou: "prologue",
                nei: `

尊敬的老师：



您好！



今天我怀着愧疚和懊悔给您写下这份检讨书，以向您表示我对违反规定这种不良行为的深刻认识以及再也不违反规定的决心。



经过今天的这件事之后，我冷静的想了很久，我这次犯的错误不仅给自己带来了麻烦，让同学们因为这种不怎么光彩的事而记住了我。而且我这种行为给班级也造成了一定的消极影响，破坏了组织的管理制度，在同学们中间也造成了不良的影响。由于我一个人的犯错误，有可能造成别的同学的效仿，影响班级纪律性，对我们的班级形象也造成了一定的破坏。为此，我深深懊悔不已！这是一次十分深刻的检查，我对于我这次犯的错误感到很惭愧，我感到很抱歉，我希望老师可以原谅我的错误，我这次的悔过真的很深刻。



不过，人总是会犯错误的，当然我知道也不能以此作为借口，我们还是要尽量的避免这样的错误发生，希望老师可以相信我的悔过之心。“人有失手，马有失蹄”。我的不良行为不是向老师的纪律进行挑战。我感到真的是很惭愧，怎么可以这么的让人失望。相信老师看到我的这个态度也可以知道我对这次的事件有很深刻的悔过态度，我这样如此的重视这次的事件，希望老师可以原谅我的错误，我可以向老师保证今后一定不会再违反规定。



今天我真的是很深刻的认识到了我的错误，知道老师说的话就要听从，老师说的话也绝对会实现她的诺言，老师所要管的一定是为了我们学生好，所以我们不用挑战老师的纪律，我们还是学生，好好的听从老师的话，好好的学习好，让老师可以放心，让老师可以信任是唯一可以做的事情。犯了这样的错误，对于家长对我的期望也是一种很大的打击，家长辛苦的赚钱，让我们孩子可以生活的好一点，让我们可以全身心的投入到学习当中，可是，我却违背了家长的心意，我犯了这样的错误，简直是对于家长心血的否定，我对此也感到很惭愧。



家长的劳累是我们所不知道的，每天为了生存而忙碌，为了家庭而承受着巨大的压力，这一切的一切都是我们所不能够了解的，我们唯一可以做的就是做他们的乖孩子，听从家长的话，家长是我们最亲的人，也是我们在现在这个社会上最可以信任的人，所以我们就要尽量的避免家长生气，不给他们带来不必要的烦恼。而我们作为他们最亲的人也不能够惹他们生气，这个都是相互的，当我们伤害到他们的心时，也是对于自己心的伤害，因为我们是最亲的人。没有任何人可以取代。



这次的事件我真的感到抱歉，希望老师可以原谅我，可以认可我认错的态度，我真的已经深刻的反省到我的错误了，希望老师再给我知错就改的机会。也希望同学也要引以为戒，不要犯和我一样愚蠢的错误了，这次的教训真的很大很大。



错误的性质是严重的。我深刻认识到，每一个老师都希望自己的学生做好自己份内的事！从而树立个人良好形象，也使我们班集体有一个良好的形象。其实，我也相信，每一个同学都希望班级给自己一个良好的环境来学习，也有一个名声在外的良好平台来展示自己，锻炼自己。但是，一个良好的环境是靠大家来共同维护建立起来的，而我自己这次却犯了错误，破坏了班级的和谐，是很不应该的，若每一个同学都这样犯错，那么是不会有良好的环境形成的！对违反纪律的同学也是应该的，更何况只是一份不是惩罚的惩罚！而这份检讨书真正的意义在于，让我意识到自己的错误，并督促自己改正！所以，老师把让我写检讨，也是为了让我深刻的认识到这点。



每一个人都应该为自己所犯下的错而付出代价！因此，我真诚的接受老师的批评和教育。我知道，作为班集体的一员，不触犯校规，不违反纪律，做好自己的事是一项最基本的责任，也是最基本的义务。但是我却连最基本的都没有做到。如今，错已铸成，留给我的是后悔莫及。我会以这次违纪事件作为一面镜子时时检点自己，批评和教育自己，自觉接受监督。我要知羞而警醒，知羞而奋进，亡羊补牢、化羞耻为动力，努力学习。我也要通过这次事件，提高我的思想认识，强化责任措施。也希望老师给一个重新认识我的机会，而不是因为违纪而认识我，对我印象深刻。



态度决定一切，细节决定成败。俗话说“合抱之木，生于毫末；九层之台，起于累土；千里之行，始于足下。泰山不拒细壤，故能成其高；江海不择细流，故能就其深。勿以善小而不为，勿以恶小而为之。”什么是细节？就是那些看似普普通通的，却十分重要的事情，一件事的成败，往往都是一些小的事情所影响产生的结果。细小的事情常常发挥着重大的作用，一个细节，可以使你走向你的目的地，也可以使你饱受失败的痛苦。每一件事情都是有无数个小的细节组成的，每一个都很重要。就好比是一条铁链，有无数铁环组成，无论其中哪一个铁环坏了，整个铁链也就没有用了。



经过今天这件事，学生深深懊恼之余，也还有点庆幸。懊恼的当然是自己违反规定，庆幸的则是也正因为这件事刚好点醒了我，令我幡然醒悟。相信老师在看完这么多以后，也会了解到我对待这件事真诚改过的态度。希望老师在以后的日子里监督我。给我一个机会，我也能为建设更好的班集体而尽自己的一份力！



此致



敬礼！`

            }
        },
        methods: {
            fn(){
                window.location.href="#/deta"
            }
        }
    }



    const routes=[
        {path:'/',component:homePage},
        {path:'/ccc',component:ccc},
        {path:'/deta',component:detailPage},
    ]


    const router = new VueRouter({
        routes
    })
    new Vue({
        el:"#app",
        router
    })

</script>

</html>